<template>
    <div>
        <el-table :data="usersData" style="width: 100%">
            <el-table-column label="#" type="index" width="80"/>
            <el-table-column prop="username" label="UserName" width="180"/>
            <el-table-column prop="email" label="Email" width="180"/>
            <el-table-column prop="city" label="City"/>
            <el-table-column label="Operations">

            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 50]"
            small
            :hide-on-single-page="paginationHide"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
        <!--            @size-change="handleSizeChange"-->
        <!--            @current-change="handleCurrentChange"-->
    </div>
</template>

<script>
export default {
    name: "User",
    data() {
        return {
            usersData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0
        }
    },
    methods: {
        getUserData(){
            this.$http.get(`/system/user/`,{
                params:{
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
            }).then(res => {
                this.usersData = res.data.data.usersData;
                this.total = res.data.data.total;

            })
        }
    },
    mounted() {
        this.getUserData()
    },
    computed: {
        paginationHide(){
            return this.total < 5
        }
    }
}
</script>

<style scoped>

</style>
